import React, { Component } from 'react';

import add from '../../assets/images/mine/add.jpg'
import send from '../../assets/images/mine/send.jpg'
import tx from '@a/images/mine/tx1.png'
// import daaka from '../../assets/images/daka/liaotian2.png'
import {
  StyledSend
} from '../StyledChat'


export default class Send extends Component {
  constructor(props){
    super(props)
    this.state = {
      msg:"",
      list:[],
    }
    this.handleMsg = this.handleMsg.bind(this);
  }
  componentDidMount(){
    console.log(123)
    console.log(this.props.messageList);
  }
  componentDidUpdate(){
    if (this.messagesEnd) {
      const scrollHeight = this.messagesEnd.scrollHeight;//里面div的实际高度  2000px
      const height = this.messagesEnd.clientHeight;  //网页可见高度  200px
      const maxScrollTop = scrollHeight - height; 
      this.messagesEnd.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;
    //如果实际高度大于可见高度，说明是有滚动条的，则直接把网页被卷去的高度设置为两个div的高度差，实际效果就是滚动到底部了。
  }
  // this.setState({ ...this.state, msg: "" })
  }
  handleMsg = (e) => {
    console.log(e.target.value);
    this.setState({ ...this.state, msg: e.target.value })
  }
  render() {
    return (
      <StyledSend>
      <div style={{height:'.44rem'}}></div>
      <div className='msg' ref={(el) => { this.messagesEnd = el; }}>
        <div style={{height:'.44rem'}}>
        </div>
        <ul>
        <li style={{ flexDirection:"row" }}>
            <div className='toux'><img src={`${tx}`} alt=""/></div>
            <div className='text'>
              <div className='rect'>婷婷老师，孩子今天不舒服</div>
              <div className='thr' style={{ borderColor:' transparent #fff transparent transparent ',left:'-0.16rem'}}></div>
            </div>
          </li>
          <li style={{ flexDirection:"row-reverse" }}>
            <div className='toux'><img style={{ borderRadius:'.24rem' }} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=612537270,4229148240&fm=11&gp=0.jpg" alt=""/></div>
            <div className='text' style={{ backgroundColor: '#2b98fd',color:'#fff'}}>
              <div className='rect'>这几天降温，是着凉了吗</div>
              <div className='thr' style={{ borderColor:' transparent  transparent transparent #2b98fd',right:'-0.16rem'}}></div>
            </div>
          </li>
          <li style={{ flexDirection:"row" }}>
            <div className='toux'><img src={`${tx}`} alt=""/></div>
            <div className='text'>
              <div className='rect'>对</div>
              <div className='thr' style={{ borderColor:' transparent #fff transparent transparent ',left:'-0.16rem'}}></div>
            </div>
          </li>
          <li style={{ flexDirection:"row" }}>
            <div className='toux'><img src={`${tx}`} alt=""/></div>
            <div className='text'>
              <div className='rect'>今天要输液</div>
              <div className='thr' style={{ borderColor:' transparent #fff transparent transparent ',left:'-0.16rem'}}></div>
            </div>
          </li>
          <li style={{ flexDirection:"row-reverse" }}>
            <div className='toux'><img style={{ borderRadius:'.24rem' }} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=612537270,4229148240&fm=11&gp=0.jpg" alt=""/></div>
            <div className='text' style={{ backgroundColor: '#2b98fd',color:'#fff'}}>
              <div className='rect'>那今天让孩子在家休息吧</div>
              <div className='thr' style={{ borderColor:' transparent  transparent transparent #2b98fd',right:'-0.16rem'}}></div>
            </div>
          </li>
          <li style={{ flexDirection:"row-reverse" }}>
            <div className='toux'><img style={{ borderRadius:'.24rem' }} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=612537270,4229148240&fm=11&gp=0.jpg" alt=""/></div>
            <div className='text' style={{ backgroundColor: '#2b98fd',color:'#fff'}}>
              <div className='rect'>我报备一下就行</div>
              <div className='thr' style={{ borderColor:' transparent  transparent transparent #2b98fd',right:'-0.16rem'}}></div>
            </div>
          </li>
        <li style={{ flexDirection:"row" }}>
            <div className='toux'><img src={`${tx}`} alt=""/></div>
            <div className='text'>
              <div className='rect'>好，那麻烦婷婷老师了</div>
              <div className='thr' style={{ borderColor:' transparent #fff transparent transparent ',left:'-0.16rem'}}></div>
            </div>
          </li>  
          {
            this.props.messageList && this.props.messageList.map((v,index)=>{
              if(v.userInfo==="孙婷婷"){
                return (
                  <li style={{ flexDirection:"row-reverse" }} key={v.id+index}>
                  <div className='toux'><img style={{ borderRadius:'.24rem' }} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=612537270,4229148240&fm=11&gp=0.jpg" alt=""/></div>
                  <div className='text' style={{ backgroundColor: '#2b98fd',color:'#fff'}}>
                  <div className='rect'>{v.message}</div>
                    <div className='thr' style={{ borderColor:' transparent  transparent transparent #2b98fd',right:'-0.16rem'}}></div>
                  </div>
                </li> 
                )
              }else{
                return (
                <li style={{ flexDirection:"row" }} key={v.id+index}>
                <div className='toux'><img src={`${tx}`} alt=""/></div>
                <div className='text'>
                  <div className='rect'>{v.message}</div>
                  <div className='thr' style={{ borderColor:' transparent #fff transparent transparent ',left:'-0.16rem'}}></div>
                </div>
              </li>)
              }

            })
          }
        </ul> 
      </div>
      <div className='tab'>
        <div className='add'><img src={`${add}`} alt=""/></div>
        <div className='inp'><input type="text"  value={`${this.state.msg}`} onChange={this.handleMsg} placeholder="输入您要发送的消息"/></div>
        <div className='send'
        onClick={this.props.onSend(this.state.msg)}
        ><img src={`${send}`} onClick={()=>{this.setState({ ...this.state, msg: '' })}} alt=""/></div>
      </div>
      </StyledSend>
    );
  }
}
